<!-- components/multi-row-table.vue -->
<template>
  <view class="table-container">
    <uni-table class="custom-table">
      <uni-tr v-for="(item, index) in tableData" :key="index">
        <uni-td 
          v-if="shouldShowFirstColumn(item)"
          :rowspan="item.rowspan"
          class="first-column">
          {{ item.group }}
        </uni-td>
        <uni-td class="second-column">{{ item.signaturePosition }}</uni-td>
        <uni-td  class="auto-column">
		<text @click="handleCellClick(index)">
			 {{ item.userName || '编辑' }} 
		</text>
		</uni-td>
      </uni-tr>
    </uni-table>
  </view>
</template>

<script>
export default {
  name: 'MultiRowTable',
  props: {
    tableData: {
      type: Array,
      required: true,
      validator: value => {
        return value.every(item => {
          return 'showRow' in item && 
                 'rowspan' in item &&
                 'group' in item &&
                 'signaturePosition' in item &&
                 'userName' in item
        })
      }
    }
  },
  methods: {
    shouldShowFirstColumn(item) {
      // 处理跨行显示逻辑
      return item.showRow && item.rowspan > 0
    }, 
	// 子组件内部处理方法
	handleCellClick(index) {
	  this.$emit('cell-click', index);
	}
  }
}
</script>

<style scoped>
/* 容器样式 */
.table-container {
  width: 100%;
  overflow-x: auto;
}

/* 表格全局样式 */
.custom-table {
  border: 1px solid  #757575 !important;
  border-collapse: collapse !important;
  table-layout: fixed;
  width: 100%;
  
  min-width: 500px;
}

/* 行样式 */
.custom-table ::v-deep uni-tr {
  border-bottom: 1px solid  #757575 !important;
}

/* 单元格通用样式 */
.custom-table ::v-deep uni-td {
  border: 1px solid  #757575 !important;
  padding: 12px;
  vertical-align: middle;
  box-sizing: border-box;
  
  word-break: break-word;
}

/* 第一列样式 */
.custom-table ::v-deep .first-column {
  width: 110px !important;
  min-width: 110px;
  max-width: 110px;

  background: #e9f1fe;
  text-align: center;
  color: #000;
  border-right: 1px solid  #757575 !important;
}

/* 第二列样式 */
.custom-table ::v-deep .second-column {
  width: 150px !important;
  min-width: 150px;
  max-width: 150px;
  background: #e9f1fe;
  text-align: center;
   min-height: 60px; /* 新增最小高度 */
    align-items: center; /* 垂直居中 */
     justify-content: center; /* 水平居中 */
  border-right: 1px solid  #757575 !important;
}

/* 自适应列样式 */
.custom-table ::v-deep .auto-column {
  background: #fff;
  display: flex;
   justify-content: center; /* 水平居中 */
  min-width: 200px; align-items: center; /* 垂直居中 */
   min-height: 60px; /* 新增最小高度 */
}

/* 添加点击反馈效果 */
.custom-table ::v-deep .auto-column:active {
  background-color: #f0f0f0;
}
</style>